<template>
  <div class="container">
    <div>
      <div class="import">
        <el-button type="primary" icon="el-icon-plus" @click="addFormFile">选择含密图像</el-button>
        <input ref="upFile" class="file" name="file" type="file" style="display: none" @change="importExcel" />
      </div>
      <div>
        <el-image :src="scrUrl" />
      </div>
      <div class="import">
        <el-button type="primary" icon="el-icon-plus" @click="getDecryptKey">选择私钥</el-button>
        <input ref="decrypt" class="file" name="file" type="file" style="display: none" @change="decryptKey" />
        <div class="import">
          <span>{{ fileName }}</span>
        </div>
      </div>
      <div>
        <el-button type="primary" @click="submit()">解密</el-button>
      </div>
    </div>
    <div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'Decrypt',
  data() {
    return {
      scrUrl: '',
      fileName: '',
      fileList: []
    }
  },

  methods: {
    addFormFile() {
      this.$refs.upFile.dispatchEvent(new MouseEvent('click'))
    },
    getDecryptKey() {
      this.$refs.decrypt.dispatchEvent(new MouseEvent('click'))
    },
    importExcel(e) {
      console.log(e.target.files)
      let file = e.target.files[0]
      if (file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg") {
        this.scrUrl = URL.createObjectURL(file)
      }
    },
    decryptKey(e) {
      let file = e.target.files[0]
      this.fileName = file.name
    },
    submit(){
      
    }
  }
}
</script>

<style>
.container {
  padding: 10px;
}

.import {
  margin-top: 20px;
}

.el-image {
  margin-top: 20px;
  width: 200px;
  height: 200px;
}
</style>